<template>
  <div class="layer" @click="clickShadow">
    <div class="layer_t" @click.stop.prevent>查询结果</div>
    <div class="layer_b">
      <div class="search_list">
        <div class="row_search" v-for="(item,index) in searchList" :key="index" @click="selectFund(item)">
          <div class="col_search col_search_1">{{item.fundCode}}</div>
          <div class="col_search col_search_2">{{item.fundName}}</div>
          <div class="col_search col_search_3">{{item.statusName}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      searchList: {
        type: Array
      },
      chooseFund: {
        type: Object
      },
      closeLayer: {
        type: Object
      }
    },
    methods: {
      selectFund (item) {
        var obj = {};
        Object.assign(obj,{
          ofcode: item.fundCode,
          ofname: item.fundName
        });
        this.$emit('chooseFund',obj);
      },

      clickShadow () {
        let isSearch = false;
        this.$emit('closeLayer',isSearch);
      }
    }
  }
</script>

<style scoped>
  .layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1030;
  }
  .layer .layer_t {
    width: 100%;
    height: 52px;
    position: absolute;
    left: 0;
    top: 170px;
    background: #f4f4f4;
    text-align: center;
    line-height: 52px;
  }
  .layer .layer_b {
    position: absolute;
    left: 0;
    right: 0;
    top: 222px;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .layer .layer_b::-webkit-scrollbar {
    width: 0;
  }
  .row_search {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 45px;
    padding: 5px 5%;
    border-bottom: 1px solid #e7e7e7;
    background: #fff;
  }
  .col_search {
    line-height: 14px;
  }
  .col_search_1 {
    -webkit-flex: 2;
    flex: 2;
    text-align: left;
  }
  .col_search_2 {
    -webkit-flex: 4;
    flex: 4;
  }
  .col_search_3 {
    -webkit-flex: 3;
    flex: 3;
    text-align: right;
  }
</style>
